<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="fml" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/resource/js/jquery-3.2.1.js"></script>
    <script src="${pageContext.request.contextPath}/resource/bootstrap4/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/resource/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
    <form:form action="${pageContext.request.contextPath}/food/insert" method="post" modelAttribute="diet">
        厂家：<select name="vender.id" id="vender"><option value="0">请选择</option></select>
        <br>
        名称：<form:input path="name"/><form:errors path="name" cssStyle="color: red"/>
        <br>
        生产日期:<input name="createDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value="<fml:formatDate value='${diet.createDate}' pattern='yyyy-MM-dd'/>"/><form:errors path="createDate" cssStyle="color: red"/>
        <br>
        生产地址:
        <select name="province.id" id="province" onchange="getTown()"><option value="0">请选择</option></select>-
        <select name="town.id" id="town" onchange="getCounty()"><option value="0">请选择</option></select>-
        <select name="county.id" id="county"><option value="0">请选择</option></select>
        <br>
        保质期:<form:input path="expirationNum"/><form:errors path="expirationNum" cssStyle="color: red"/>
        <br>
        <form:errors path="message" cssStyle="color: red"/>
    </form:form>
    <button type="button" onclick="sub()">提交</button>

    <script>
        $(function () {
            for (let temp of ${VENDERS}){
                $("#vender").append("<option value="+temp.id+">"+temp.name+"</option>");
            }
            $("#vender").val(${diet.vender.id});
            for (let temp of ${CITYS}){
                $("#province").append("<option value="+temp.id+">"+temp.city+"</option>");
            }
            $("#province").val(${diet.province.id});
            getTown();
        });

        function sub() {
            if ($("#vender").val()==0||$("#province").val()==0||$("#town").val()==0||$("#county").val()==0){
                alert("所有下拉选项为必选项");
                return;
            }
            $("form").submit();
        }

        function getTown() {
            $("#town").html("").append("<option value='0'>请选择</option>");
            $("#county").html("").append("<option value='0'>请选择</option>");
            let pid = $("#province").val();
            if (pid!=0&&pid!=''){
                $.post("${pageContext.request.contextPath}/city/getCitys",{"pid":pid},function (result) {
                    for (let temp of result){
                        $("#town").append("<option value="+temp.id+">"+temp.city+"</option>");
                    }
                    $("#town").val(${diet.town.id});
                    getCounty();
                });
            }
        }

        function getCounty() {
            $("#county").html("").append("<option value='0'>请选择</option>");
            let pid = $("#town").val();
            console.log(pid);
            if (pid!=0&&pid!=''){
                $.post("${pageContext.request.contextPath}/city/getCitys",{"pid":pid},function (result) {
                    for (let temp of result){
                        $("#county").append("<option value="+temp.id+">"+temp.city+"</option>");
                    }
                    $("#county").val(${diet.county.id});
                });
            }
        }
    </script>
</body>
</html>
